<template>
  <div class="app-container">
    <!-- 查看服务 -->
    <h5 class="titleInfo">基础信息</h5>
    <el-form ref="form" :model="form" label-width="150px" disabled>
      <!-- 查询模块 -->
      <div class="formDiv">
        <el-row>
          <el-col :span="24">
            <el-form-item label="商户名称">
              <el-input v-model="form.shop.name" style="width:100%;"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="服务名称">
              <el-input v-model="form.service_name" style="width:100%;"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="服务描述">
              <el-input size="large" type="textarea" :rows="4" v-model="form.service_desc"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="服务原价" prop="oldPrice">
              <el-input v-model="form.origin_price"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="服务售价">
              <el-input v-model="form.price"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="分佣比例" prop="CostPrice">
              <el-input v-model="form.division_rate"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="服务排序">
              <el-input v-model="form.sort"></el-input>
            </el-form-item>
          </el-col>
          <el-form-item label="销量">
            <el-input v-model="form.sale_num"></el-input>
          </el-form-item>
        </el-row>
      </div>
      <div class="divBar" />
      <!-- 服务图片 -->
      <h5 class="titleInfo">服务图片</h5>
      <div class="uploadImgInfo">
        <el-form-item label>
          <newUpload ref="uploadImg" :fileNum="5" :file-list="fileList" />
          <span class="spanINfo">服务主图为展示的第一张图片，添加上传图片，最多可添加5张，点击图片左右滑动进行排序（除主图外）</span>
          <span class="spanINfo">请上传小于2M图片，格式为jpg、png、jpeg</span>
        </el-form-item>
      </div>
      <div class="divBar" />
      <!-- 服务详情 -->
      <h5 class="titleInfo">服务详情</h5>
      <div id="wangeditor">
        <!-- 富文本编辑器 -->
        <el-row>
          <el-col :span="16">
            <el-form-item label>
              <Tinymce v-model="form.service_content" :readonly="1"></Tinymce>
            </el-form-item>
          </el-col>
        </el-row>
      </div>
      <div class="divBar" />
      <!-- 购买须知 -->
      <h5 class="titleInfo">购买须知</h5>
      <el-row>
        <el-col :span="24">
          <el-form-item label="预约信息">
            <template>
              <el-checkbox-group v-model="appointment">
                <el-checkbox label="0">无需预约，如遇高峰时段需要排队</el-checkbox>
                <el-checkbox label="1">
                  请您提前
                  <el-input
                    style="width:25%;"
                    type="text"
                    size="small"
                    v-model="form.appointment_hour"
                  ></el-input>小时预约
                </el-checkbox>
              </el-checkbox-group>
            </template>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="适用人数" prop="ReservationInfo">
            <template>
              <!-- <el-checkbox-group v-model="checkList"> -->
              <!-- <el-checkbox label="2" checked> -->
              每张团购券最多
              <el-input style="width:10%;" type="text" size="small" placeholder="1"></el-input>人使用
              <!-- </el-checkbox> -->
              <!-- </el-checkbox-group> -->
            </template>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="规则提示">
            <el-input size="medium" type="textarea" :rows="4" v-model="form.rule_msg"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="温馨提示">
            <el-input size="medium" type="textarea" :rows="4" v-model="form.warm_msg"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>
        
<script>
import { auditInfo } from "@/api/servemange";

import phoneReg from "@/utils/validate";
import newUpload from "@/components/imgUpload/index";
import Tinymce from "@/components/Tinymce";

export default {
  components: { newUpload, Tinymce },
  data() {
    return {
      navNums: [],
      dialogFormVisible: false,
      tableLoading: true,
      submitInfoVisible: false,
      dates: [],
      // form表单
      form: {
        appointment_hour: "",
        appointment: "",
        shop: {},
      },
      fileList: [],
      //文本域信息
      textarea: "",
      editor: null,
      editorContent: "",
      //预约信息
      checkList: [],
      appointment: [],
    };
  },
  filters: {
    filterNull(e) {
      if (e) {
        return e;
      } else {
        return "暂无";
      }
    },
  },
  created() {
    this.getInfo();
  },
  mounted() {},
  computed: {},
  methods: {
    //信息获取
    getInfo() {
      let id = this.$route.query.id;
      auditInfo({ id: id }).then((res) => {
        // console.log(res)
        if (res.data.code == 200) {
          this.form = res.data.data;
          //图片
          // this.form.appointment_hour =
          //   res.data.data.appointment_hour == 0 ? 0 : 1;
          if (res.data.data.appointment_hour == 0) {
            this.appointment = ["0"];
          } else if (res.data.data.appointment_hour > 0) {
            this.appointment = ["1"];
          }
          this.form.appointment_hour =
            res.data.data.appointment_hour == 0
              ? ""
              : res.data.data.appointment_hour;
          if (res.data.data.img) {
            let ImgUrl = "http://mmkappnew.oss-cn-beijing.aliyuncs.com/";
            let enp_img = res.data.data.img.map((item) => {
              return { url: ImgUrl + item.url };
            });
            this.fileList = enp_img;
          }
        }
      });
    },
    //弹窗组件
    eleMsg(txt, status) {
      this.$message({
        showClose: true,
        message: txt,
        type: status,
      });
    },
    //成功状态弹窗
    succStatus(txt, status) {
      this.eleMsg(txt, "success");
    },
    //失败状态弹窗
    errorStatus(txt) {
      this.eleMsg(txt, "error");
    },
    // 警告状态弹窗
    warningStatus(txt) {
      this.eleMsg(txt, "warning");
    },
    // 路由跳转
    toRoutes(e, userId) {
      let route = { name: e, query: { userId: userId } };
      this.$router.push(route);
    },
    //改变页面条数
    handleSizeChange(val) {
      this.form.pageSize = val;
      this.getList(this.form);
    },
    //选择页数
    handleCurrentChange(val) {
      this.form.pageNum = val;
      this.getList(this.form);
    },

    // 删除
    callFn(e) {
      this.tableData.splice(e, 1);
    },
    //confirm框
    eleConfirm(e) {
      this.$confirm(e.desc, e.title, {
        confirmButtonText: e.confirmBtnTxt,
        cancelButtonText: e.cancelBtnTxt,
        type: "warning",
      })
        .then(() => {
          e.fn();
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: e.catchInfo,
          });
        });
    },
  },
};
</script>
<style scoped>
/* 主页列表样式 */
.listDiv {
  margin-bottom: 20px;
  padding: 0 20px;
}
/* 分页 */
.pagesCon {
  height: 40px;
  margin-top: 20px;
}
.pagesCon > div {
  float: right;
}
.app-container {
  padding: 0.1px !important;
}
.form {
  margin-left: 20px;
}
.elFormImg {
  width: 268px;
}
.submitInfo {
  color: red;
  padding: 20px;
}
.submitBtn {
  margin-top: 20px;
  margin-bottom: 20px;
}
/* 服务审核中信息样式 */
.serviceInfo {
  display: block;
  padding: 20px;
  font-size: 20px;
  color: #444;
  cursor: pointer;
}
/* 服务图片区域样式 */
.uploadImgInfo {
  /* margin-left: 150px; */
}
#wangeditor {
  /* padding: 20px; */
}
/* 提示语样式 */
.spanINfo {
  display: block;
  color: #444;
}
</style>
